<template>
	<div class="row w-100">
		<div class="col-4 overflow-hidden">
			<ul class="">
				<li v-for="(tag, key) in $store.state.tagList" :key="key" in class=" border-bottom bg-light ">
					<div @click="toggle_tag(key)" class=" d-flex justify-content-between align-items-center tag_bar" :class="{ clicked_tag: tag.show }">
						<div class="tag_name">
							{{ tag.name }}
						</div>
						<div class="me-1 d-flex">
							<div class="me-2 badge  bg-info rounded-pill fst-italic tag">
								{{ $store.state.topoList.filter((item) => item.tags.indexOf(tag.name) >= 0).length }}
							</div>
							<div v-show="!tag.show" class="el-icon-arrow-down"></div>
							<div v-show="tag.show" class="el-icon-arrow-up"></div>
						</div>
					</div>
					<slide-up-down :active="tag.show" :duration="300">
						<ul class="">
							<li @mouseover="switch_topo(topo.name)" v-for="(topo, k) in $store.state.topoList.filter((item) => item.tags.indexOf(tag.name) >= 0)" :key="k" class="d-flex topo_name">
								<!-- <a class="" href="#"> {{ topo.name }}</a> -->
								<router-link :to="{ name: 'topo_detail', params: { id: topo.id } }">{{ topo.name }}</router-link>
							</li>
						</ul>
					</slide-up-down>
				</li>
			</ul>
		</div>
		<div class=" col-8">
			<div class="sticky-top d-flex justify-content-center " style="height:400px">
				<img loading="lazy" :src="$store.state.topoMapURL" alt="topo-map" />
			</div>
			<div class=" bg-light ">
				<div class="   d-flex justify-content-center align-items-center">
					<div class="text-info text-center font-weight-bold  ">topology infomation</div>
					<div class="  ms-2 text-secondary font-weight-bold">{{ topo_name }}</div>
				</div>
				<pre class="text-muted topo_info ">{{ topo_info }}</pre>
			</div>
		</div>
	</div>
</template>

<script>
	import http from '@/utils/Http';
	import SlideUpDown from 'vue-slide-up-down';
	export default {
		components: {
			SlideUpDown,
		},
		methods: {
			update_topoName: function(name) {
				this.topo_name = '- ' + name;
			},
			toggle_tag: function(key) {
				if (!this.$store.state.tagList[key].show) {
					this.$store.state.tagList.forEach((item) => (item.show = false));
					this.$store.state.tagList[key].show = true;
				} else {
					this.$store.state.tagList.forEach((item) => (item.show = false));
					this.$store.state.tagList[key].show = false;
				}
			},
			update_topoInfo: function(url) {
				http({
					url: url,
				})
					.then((res) => {
						this.topo_info = res.data;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			switch_topo: function(name) {
				this.$store.commit('update_topoMapURL', name);
				this.$store.commit('update_topoInfoURL', name);
				this.update_topoInfo(this.$store.state.topoInfoURL);
				this.update_topoName(name);
			},
		},
		data() {
			return {
				topo_info: '',
				topo_name: '',
			};
		},
		mounted() {
			// /topo/tag/api/list/
			http({
				url: '/topo/tag/api/list/',
				method: 'get',
			})
				.then((res) => {
					res.data.forEach(function(item, index, input) {
						// input[index] = item.name
						input[index].show = false;
					});
					this.$store.commit('update_tagList', res.data);
				})
				.catch((err) => {
					console.log(err);
				});
			// /topo/tag/api/list/
			http({
				url: '/topo/api/',
				method: 'get',
			})
				.then((res) => {
					this.$store.commit('update_topoList', res.data);
				})
				.catch((err) => {
					console.log(err);
				});
		},
	};
</script>

<style scoped>
	li {
		list-style: none;
	}

	.topo_name {
		font-size: 0.8em;
		transition: all 0.3s ease-out;
		transform-origin: left center;
		margin: 4px;
		margin-right: 20px;
	}

	.topo_name:hover a {
		color: red;
	}

	.topo_name:hover {
		transform: scale(1.2);
	}

	img {
		max-width: auto;
		max-height: 100%;
	}

	a {
		text-decoration: none;
	}

	.tag_name {
		padding-left: 20px;
		transition: all 0.2s;
		transform-origin: left center;
		font-size: 1em;
	}

	.tag_bar {
		background: azure;
		width: 100%;
		height: 30px;
		text-align: bottom;
		transition: all 0.3s ease-in-out;
	}

	.tag_bar:hover {
		background: wheat;
	}

	.tag_bar:hover .tag_name {
		transform: scale(1.4);
	}

	.clicked_tag {
		background: rgb(59, 201, 135);
		color: rgb(253, 255, 250);
		font-size: 1.2em;
	}

	.topo_info {
		font-size: 0.7em;
	}

	.text-info {
		font-size: 1.6em;
	}
</style>
